<template>
	<view class="container">
		<view class="navigator" @click="handleBack"><text class="cuIcon-back text-white"></text></view>
		<view>
			<view class="padding titleh1">{{$t('forgotPwd.title')}}</view>
			<view class="form">
				<span>
					<view class="conwrap no-bg">
						<view class="cu-form-group">
							<input
								placeholder-style="color: rgba(255, 255, 255, 0.6);"
								class="uni-input-input"
								type="text"
								v-model="form.mobile"
								:placeholder="$t('forgotPwd.phone')"
								text="获取验证码"
							/>
							<view class="text-white" @click="getVerificationCode">{{clock_txt}}</view>
						</view>
						<view class="cu-form-group">
							<view>
								<input placeholder-style="color: rgba(255, 255, 255, 0.6);" class="uni-input-input" type="text" v-model="form.code" :placeholder="$t('forgotPwd.vCode')" />
							</view>
						</view>
						<view class="cu-form-group">
							<view>
								<input
									placeholder-style="color: rgba(255, 255, 255, 0.6);"
									class="uni-input-input"
									type="text"
									v-model="form.login_newPwd"
									password
									:placeholder="$t('forgotPwd.newPwd')"
								/>
							</view>
						</view>
						<view class="cu-form-group">
							<view>
								<input
									placeholder-style="color: rgba(255, 255, 255, 0.6);"
									class="uni-input-input"
									type="text"
									v-model="form.c_login_newPwd"
									password
									:placeholder="$t('forgotPwd.cPwd')"
								/>
							</view>
						</view>
					</view>
					<ZButton :label="$t('forgotPwd.modify')" @click="submit" />
				</span>
			</view>
			<view class="botreset"><navigator url="/pages/login/index">{{$t('forgotPwd.signIn')}}</navigator></view>
		</view>
	</view>
</template>
<script>
import context from '../../../../main.js'
import { uniNavBar } from '@dcloudio/uni-ui';
import ZButton from './components/ZButton.vue';
import fetch from '@/common/fetch.js';
import common from '@/mixin/common.js';
export default {
	components: {
		uniNavBar,
		ZButton
	},
	mixins: [common],
	data() {
		return {
			current: {
				title: ''
			},
			form: {
				mobile: '',
				code: '',
				login_newPwd: '',
				c_login_newPwd: ''
			},
			clock: 60,
			clock_txt:context.$t('forgotPwd.captcha'),
			invite_codeClocker: null,
			info: {
				mobile: context.$t('forgotPwd.phone'),
				code: context.$t('forgotPwd.vCode'),
				login_newPwd: context.$t('forgotPwd.newPwd'),
				c_login_newPwd: context.$t('forgotPwd.cPwd')
			}
		};
	},
	methods: {
		getVerificationCode() {
			if (this.clock == 60) {
			 if (this.form.mobile.length === 0) {
				uni.showToast({
					title:context.$t('forgotPwd.phone'),
					icon: 'none',
					duration: 2000
				});
			} else {
				fetch
					.request(
						'/index/index/sendMobileCode',
						{
							mobile: this.form.mobile
						},
						'POST',
						true,
						false
					)
					.then(res => {
						if (res.code === '0' || res.code === 0) {
							uni.showToast({
								icon: 'none',
								mask: true,
								title: res.data,
								duration: 2000
							});
							this.invite_codeClocker = setInterval(() => {
								if (this.clock <= 0) {
									this.clock_txt = context.$t('forgotPwd.captcha');
									this.clock = 60;
									clearInterval(this.invite_codeClocker);
								} else {
									this.clock--;
									this.clock_txt = this.clock;
								}
							}, 1000);
						}
					});
			}
			}
		},
		handleBack() {
			uni.navigateBack();
		},
		submit() {
			if (this.vaild(this.form, this.info)) {
				if (!/^1[3456789]\d{9}$/.test(this.form.mobile)) {
					uni.showToast({
						title: context.$t('forgotPwd.err'),
						icon: 'none',
						duration: 2000
					});
					return;
				}
				fetch.request('/index/mobile/updateNewPwd', this.form, 'GET').then(res => {
					if (res.code === '0') {
						uni.showToast({
							title: context.$t('forgotPwd.mSuccess'), //其实是error,为了不展示给用户
							icon: 'success',
							duration: 2000
						});

						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/login/index'
							});
						}, 2100);
					} else {
						uni.showToast({
							title: res.msg, //其实是error,为了不展示给用户
							icon: 'none',
							duration: 2000
						});
					}
				});
			}
		}
	}
};
</script>

<style lang="less" scoped>
.container {
	width: 100vw;
	height: 100vh;
	background-image: linear-gradient(0deg, #fb8173,#fb8173);
	top: constant(safe-area-inset-top);
	top: env(safe-area-inset-top);
}
.cu-form-group {
	border-bottom: 0.5px solid #c8c7cc;
	border-top: none;
	padding-left: 0;
	padding-right: 0;
}
.uni-input-input{
	width: 300px;
}
</style>
